import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Icon from "react-native-vector-icons/EvilIcons";

export default class Progress extends Component {
    render() {
        let pdLeft,lineWidth;
        const { point, top } = this.props;
        if(point){
            const percent = Math.floor(point/top*100);
            if(percent){
                _percent = percent - 5;
                pdLeft = {left: `${_percent}%`};
                lineWidth = {width: `${percent}%`}
            }
        }
        
        return (
            <View>
                <View style={styles.line}>
                    <Icon style={[styles.location,pdLeft]} name='location' size={23} color="#e8b12a"/>
                    <View style={[styles.online,lineWidth]}></View>
                </View>
                <View style={styles.point}>
                    <Text style={{color:"#999"}}>0</Text>
                    <Text style={{color:"#999"}}>{top}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    line: {
        position:"relative",
        height:5,
        backgroundColor:"#efefef",
        borderRadius:5,
        marginTop:20
    },
    location: {
        position:"absolute",
        top: -22,
        left: -10
    },
    online:{
        position:"absolute",
        top: 0,
        width: 0,
        height: 5,
        backgroundColor:"#e8b12a",
        borderRadius: 5,
    },
    point: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: 5
    }
});